import request from '@/request.js'
import utils from '@/utils/index.js'

import tileShow from '@/components/tileShow/tileShow.vue'
import propEdit from '@/components/propEdit/propEdit.vue'
import envShow from '@/components/envShow/envShow.vue'
import sideLayout from '@/components/sideLayout/sideLayout.vue'

export default {
  name: 'envManage',
  components: {
    tileShow,
    propEdit,
    sideLayout,
    envShow
  },
  data () {
    return {
      isEnvLoading: false,
      isSave: true,
      // 菜单初始选择，一定要与Menu组件的active-name保持一致
      menuSelected: '1',
      
      // 选择的环境
      envSelected: '',
      envData: [],
      autotilesData: [],
      tilesetsData: [],
      
      // 环境数据
      envDetailData: null,
      
      // 选择Autotile
      addAutotileModal: false,
      
      // 配置属性
      propSelection: '',
    }
  },
  computed: {    
    // 选中的Autotile呈现的样式
    autotileSelectedStyle () {
      return (autotile) => {
        if (!this.envDetailData) {
          return {}
        }
        
        const judge = this.envDetailData.autotiles.some(index => this.envDetailData.objects[index].autotile === autotile)
        if (judge) {
          return {
            border: '3px solid black'
          }
        }
        
        return {}
      }
    },
  },
  methods: {
    // 初始化获取数据
    getEnv (onSuccess, onFailed) {
      // 先获取Autotile
      request.getAutoTile().then((autotiles) => {
        this.autotilesData = autotiles
        return request.getTileset()
      })
      // 再获取所有图集
      .then((tilesets) => {
        this.tilesetsData = tilesets
        this.tilesetsData.unshift('')
        return request.getEnv()
      })
      .then((env) => {
        this.envData = env
        onSuccess()
      })
      .catch((err) => {
        console.log(err)
        onFailed()
      })
    },
    
    updateEnv (selected, list) {
      this.envSelected = selected
      this.envData = list
    },
    
    // 选中的环境发生改变时
    changeEnv (env) {
      if (env !== '') {
        this.isEnvLoading = true
        request.getEnvDetail(env).then((data) => {
          this.envDetailData = data
          this.isEnvLoading = false
          this.$Notice.success({
            title: '获取详细信息成功'
          })
        })
        .catch((err) => {
          console.log(err)
          this.isEnvLoading = false
          this.$Notice.error({
            title: '获取详细信息出错'
          })
        })        
      }
    },
    
    // 顶部导航选择
    selectMenuHandler (name) {
      this.menuSelected = name
    },
    
    // Autotile选择
    selectAutotilesHandler () {
      this.addAutotileModal = true
    },
    
    // 匹配图集选择
    selectTilesetHandler (selection) {
      const value = selection.value
      let content = '是否匹配图集' + '【' + value + '】, 一旦确定, 将重置图集部分的设置, 之前的配置不会保留' 
      if (value === '') {
        content = '是否清空图集匹配, 一旦确定, 将重置图集部分的设置, 之前的配置不会保留' 
      }
      this.$Modal.confirm({
        title: '选择图集',
        content: content,
        loading: true,
        onOk: () => {          
          request.setEnvTiles(value, this.envSelected).then((data) => {
            this.$Notice.success({
              title: '匹配成功'
            })
            this.envDetailData = data
            this.$Modal.remove()
          })
          .catch((err) => {
            console.log(err)
            this.$Notice.error({
              title: '匹配失败'
            })
            this.$Modal.remove()
          })
        }
      })        
    },
    
    // 匹配单张Autotile
    selectAutotile (index) {
      const autotile = this.autotilesData[index].autotile
      
      request.setEnvAutotile(autotile, this.envSelected).then((data) => {
        this.$Notice.success({
          title: '匹配成功'
        })
        this.envDetailData = data
      })
      .catch((err) => {
        console.log(err)
        this.$Notice.error({
          title: '匹配失败'
        })
      })
    },
    
    // 属性改变触发
    propChangeHandler (index, args) {
      this.envDetailData.objects[index] = args[0]
      this.isSave = false
    },
    
    // 保存设置
    saveEnv () {
      request.setEnv(this.envDetailData, this.envSelected).then(() => {
        this.isSave = true
        this.$Notice.success({
          title: '保存成功'
        })
      })
      .catch((err) => {
        console.log(err)
        this.$Notice.error({
          title: '保存失败'
        })
      })
    }
  }
}